<template>
  <div class="resume-preview">
    <div class="preview-paper">
      <div class="preview-content" v-if="hasContent">
        <!-- 头部信息 -->
        <div class="resume-header">
          <div class="header-content">
            <div class="header-left">
              <h1 class="name">
                <span v-if="resumeStore.profile.lastName || resumeStore.profile.firstName">
                  {{ resumeStore.profile.lastName }}{{ resumeStore.profile.firstName }}
                </span>
                <span v-else>姓名</span>
              </h1>
              <!-- 中文名显示 -->
              <div v-if="resumeStore.profile.name && (resumeStore.profile.lastName || resumeStore.profile.firstName)" class="chinese-name">
                {{ resumeStore.profile.name }}
              </div>
              <div class="basic-info">
                <span v-if="resumeStore.profile.gender">{{ resumeStore.profile.gender }}</span>
                <span v-if="resumeStore.profile.gender && resumeStore.profile.nationality" class="separator">|</span>
                <span v-if="resumeStore.profile.nationality">{{ resumeStore.profile.nationality }}</span>
                <span v-if="resumeStore.profile.birthDate" class="separator">|</span>
                <span v-if="resumeStore.profile.birthDate">出生日期: {{ formatDate(resumeStore.profile.birthDate) }}</span>
                <span v-if="resumeStore.profile.city" class="separator">|</span>
                <span v-if="resumeStore.profile.city">{{ resumeStore.profile.city }}</span>
              </div>
              <div class="contact-info">
                <span v-if="resumeStore.profile.phone">
                  <span class="icon">📞</span>
                  {{ resumeStore.profile.phone }}
                </span>
                <span v-if="resumeStore.profile.phone && resumeStore.profile.email" class="separator">|</span>
                <span v-if="resumeStore.profile.email">
                  <span class="icon">✉️</span>
                  {{ resumeStore.profile.email }}
                </span>
                <span v-if="resumeStore.profile.wechat" class="separator">|</span>
                <span v-if="resumeStore.profile.wechat">
                  <span class="icon">💬</span>
                  {{ resumeStore.profile.wechat }}
                </span>
              </div>

              <div class="job-intention">
                <span v-if="resumeStore.profile.desiredPosition">求职意向: {{ resumeStore.profile.desiredPosition }}</span>
              </div>
            </div>

          </div>
        </div>

        <!-- 个人优势 -->
        <div class="resume-section" v-if="resumeStore.personalAdvantages">
          <h2 class="section-title">个人优势</h2>
          <div class="section-divider"></div>
          <p class="section-content">
            {{ resumeStore.personalAdvantages }}
          </p>
        </div>

        <!-- 专业技能 -->
        <div class="resume-section" v-if="hasSkills">
          <h2 class="section-title">专业技能</h2>
          <div class="section-divider"></div>
          <div class="skills-content">
            <ul class="skills-list">
              <li 
                v-for="skill in resumeStore.skills" 
                :key="skill" 
                class="skill-item"
              >
                {{ skill }}
              </li>
            </ul>
          </div>
        </div>

        <!-- 语言 -->
        <div class="resume-section" v-if="hasLanguages">
          <h2 class="section-title">语言</h2>
          <div class="section-divider"></div>
          <div class="languages-content">
            <div class="languages-text">
              {{ resumeStore.languages.join('，') }}
            </div>
          </div>
        </div>

        <!-- 教育经历 -->
        <div class="resume-section" v-if="hasEducation">
          <h2 class="section-title">教育经历</h2>
          <div class="section-divider"></div>
          <div class="education-content">
            <div class="education-table">
              <div class="education-header-row">
                <div class="education-header-cell">专业</div>
                <div class="education-header-cell">学历</div>
              </div>
              <div 
                v-for="(education, index) in filteredEducation" 
                :key="index" 
                class="education-row"
              >
                <div class="education-cell">{{ education.major || '未填写' }}</div>
                <div class="education-cell">{{ education.degree || '未填写' }}</div>
              </div>
            </div>
          </div>
        </div>

        <!-- 经验 -->
        <div class="resume-section" v-if="hasExperience">
          <h2 class="section-title">经验</h2>
          <div class="section-divider"></div>
          <div class="experience-content">
            <div class="experience-text" v-html="resumeStore.experience"></div>
          </div>
        </div>
      </div>

      <!-- 空状态 -->
      <div class="empty-state" v-else>
        <h3>开始创建您的简历</h3>
        <p>在左侧填写您的个人信息，这里将实时显示简历预览</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useResumeStore } from '../../stores/resume'

const resumeStore = useResumeStore()

// 计算是否有内容
const hasContent = computed(() => {
  const hasName = resumeStore.profile.name || resumeStore.profile.lastName || resumeStore.profile.firstName
  const hasAvatar = resumeStore.profile.avatarUrl
  const hasEducation = resumeStore.education.some(edu => edu.major || edu.degree)
  const hasLanguages = resumeStore.languages.length > 0
  const hasSkills = resumeStore.skills.length > 0
  const hasAdvantages = resumeStore.personalAdvantages
  const hasExperience = resumeStore.experience && resumeStore.experience.length > 0
  

  
  return hasName || hasAvatar || hasEducation || hasLanguages || hasSkills || hasAdvantages || hasExperience
})

// 计算是否有教育经历
const hasEducation = computed(() => {
  return resumeStore.education.some(edu => edu.major || edu.degree)
})

// 过滤有效的教育经历
const filteredEducation = computed(() => {
  return resumeStore.education.filter(edu => edu.major || edu.degree)
})

// 计算是否有技能
const hasSkills = computed(() => {
  return resumeStore.skills.length > 0
})

// 计算是否有语言
const hasLanguages = computed(() => {
  return resumeStore.languages.length > 0
})

// 计算是否有经验
const hasExperience = computed(() => {
  return resumeStore.experience && resumeStore.experience.length > 0
})

// 格式化日期
const formatDate = (dateString) => {
  if (!dateString) return ''
  const date = new Date(dateString)
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit'
  })
}

// 计算年龄
const calculateAge = (dob) => {
  if (!dob) return ''
  const birthDate = new Date(dob)
  const today = new Date()
  let age = today.getFullYear() - birthDate.getFullYear()
  const monthDiff = today.getMonth() - birthDate.getMonth()
  if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
    age--
  }
  return age
}

// 格式化日期范围
const formatDateRange = (dateRange) => {
  if (!dateRange || !Array.isArray(dateRange) || dateRange.length !== 2) {
    return ''
  }
  
  const formatDate = (date) => {
    if (!date) return ''
    const d = new Date(date)
    return `${d.getFullYear()}.${String(d.getMonth() + 1).padStart(2, '0')}`
  }
  
  const startDate = formatDate(dateRange[0])
  const endDate = formatDate(dateRange[1])
  
  return `${startDate}-${endDate}`
}
</script>

<style scoped>
.resume-preview {
  width: 100%;
  height: 100%;
  background: #f0f0f0;
  overflow-y: auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.preview-paper {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 800px;
  min-height: 100%;
  padding: 40px;
  box-sizing: border-box;
}

.preview-content {
  font-family: "SimSun", "宋体", serif;
  line-height: 1.6;
  color: #333;
}

/* 头部信息 */
.resume-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30px;
  padding-bottom: 20px;
}

.header-content {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  position: relative;
}

.header-left {
  text-align: center;
  flex: 1;
  max-width: 600px;
}

.header-right {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.name {
  font-size: 2.5rem;
  font-weight: bold;
  margin: 0 0 15px 0;
  text-align: center;
}

.chinese-name {
  font-size: 1.2rem;
  color: #666;
  margin: 0 0 15px 0;
  text-align: center;
  font-weight: normal;
}

.basic-info {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.basic-info span {
  font-size: 14px;
  color: #666;
}

.basic-info .separator {
  color: #ccc;
  margin: 0 8px;
  font-weight: normal;
}

.basic-info .icon {
  margin-right: 4px;
  font-size: 12px;
}

.contact-info {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.contact-info span {
  font-size: 14px;
  color: #666;
}

.contact-info .separator {
  color: #ccc;
  margin: 0 8px;
  font-weight: normal;
}

.contact-info .icon {
  margin-right: 4px;
  font-size: 12px;
}

.job-intention {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  margin-bottom: 15px;
  flex-wrap: wrap;
}

.job-intention span {
  font-size: 14px;
  color: #666;
}

.job-intention .separator {
  color: #ccc;
  margin: 0 8px;
  font-weight: normal;
}

.additional-info {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.additional-info span {
  font-size: 14px;
  color: #666;
}

.avatar-container {
  width: 25mm;
  height: 35mm;
  border-radius: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ddd;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.avatar-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-placeholder {
  width: 25mm;
  height: 35mm;
  border-radius: 0;
  background: #f8f9fa;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ddd;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.avatar-icon {
  font-size: 1.5rem;
  color: #999;
}

/* 简历部分 */
.resume-section {
  margin-bottom: 30px;
}

.section-title {
  font-size: 1.2rem;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
  text-align: left;
}

/* 模块标题样式（用于预览） */
.module-title {
  font-size: 16px;
  font-weight: bold;
  color: #000000;
  font-family: "SimSun", "宋体", serif;
  margin: 8px 0 4px 0;
  padding: 0 0 8px 0;
  border: none;
  border-bottom: 2px solid #e0e0e0;
  background: none;
  display: block;
  clear: both;
}

/* 模块分割线样式（用于预览） */
.module-divider {
  height: 2px;
  background: #e0e0e0;
  margin: 8px 0;
  width: 100%;
  display: block;
  clear: both;
}

.section-divider {
  height: 1px;
  background-color: #e0e0e0;
  margin-bottom: 15px;
}

.section-content {
  font-size: 14px;
  line-height: 1.6;
  color: #666;
  margin: 0;
  text-align: left;
}

/* 专业技能样式 */
.skills-content {
  margin-top: 10px;
}

.skills-list {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}

.skill-item {
  padding: 4px 0;
  font-size: 14px;
  color: #333;
  line-height: 1.5;
  text-align: left;
}

/* 语言样式 */
.languages-content {
  margin-top: 10px;
}

.languages-text {
  font-size: 14px;
  color: #333;
  line-height: 1.5;
  text-align: left;
}

/* 经验内容样式 */
.experience-content {
  margin-top: 10px;
  width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.experience-text {
  white-space: pre-wrap;
  line-height: 1.8;
  font-size: 14px;
  color: #666;
  word-wrap: break-word;
  word-break: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
}

.experience-text :deep(strong) {
  font-weight: bold;
}

.experience-text :deep(em) {
  font-style: italic;
}

.experience-text :deep(u) {
  text-decoration: underline;
}

/* 教育经历样式 */
.education-content {
  margin-top: 10px;
}

.education-table {
  width: 100%;
  border-collapse: collapse;
}

.education-header-row {
  display: flex;
  background: #f8f9fa;
  border-bottom: 2px solid #e0e0e0;
  font-weight: bold;
}

.education-header-cell {
  flex: 1;
  padding: 8px 12px;
  text-align: left;
  font-size: 14px;
  color: #333;
}

.education-row {
  display: flex;
  border-bottom: 1px solid #f0f0f0;
}

.education-row:last-child {
  border-bottom: none;
}

.education-cell {
  flex: 1;
  padding: 8px 12px;
  text-align: left;
  font-size: 14px;
  color: #333;
}

.education-info {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.info-label {
  font-weight: bold;
  color: #555;
  font-size: 14px;
  min-width: 60px;
}

.info-value {
  font-size: 14px;
  color: #333;
}

.info-separator {
  color: #ccc;
  margin: 0 4px;
  font-weight: normal;
}

/* 项目经历 */
.project-item {
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  border-left: 4px solid #007bff;
}

.project-header {
  margin-bottom: 15px;
}

.project-header h3 {
  margin: 0 0 8px 0;
  font-size: 1.2rem;
  font-weight: bold;
  color: #333;
}

.project-role {
  font-size: 14px;
  color: #666;
  font-weight: 500;
}

.project-description {
  line-height: 1.8;
}

.project-description p {
  margin: 0 0 10px 0;
}

.project-details {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #e0e0e0;
}

.project-details p {
  margin: 0 0 8px 0;
  font-size: 14px;
}

/* 所获荣誉 */
.awards-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.award-item {
  padding: 8px 12px;
  background: #f8f9fa;
  border-radius: 4px;
  border-left: 3px solid #28a745;
  font-size: 14px;
  line-height: 1.5;
}

/* 空状态 */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #666;
}

.empty-icon {
  font-size: 4rem;
  margin-bottom: 20px;
}

.empty-state h3 {
  margin: 0 0 10px 0;
  color: #333;
  font-size: 1.5rem;
}

.empty-state p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .preview-paper {
    padding: 20px;
  }
  
  .resume-header {
    flex-direction: column;
    gap: 15px;
  }
  
  .header-right {
    margin-left: 0;
    align-self: center;
  }
  
  .name {
    font-size: 2rem;
  }
  
  .basic-info,
  .job-intention {
    flex-direction: column;
    gap: 5px;
  }
}
</style> 